<template>
  <div class="component-container">
    <h2>兄弟组件通信示例</h2>
    <p>父组件作为中介</p>
    
    <div class="siblings-container">
      <SiblingA 
        :message="messageToA" 
        @message-from-a="handleMessageFromA"
      />
      
      <SiblingB 
        :message="messageToB" 
        @message-from-b="handleMessageFromB"
      />
    </div>
    
    <div class="message-log">
      <h4>消息记录</h4>
      <ul>
        <li v-for="(msg, index) in messageLog" :key="index">
          {{ msg }}
        </li>
      </ul>
    </div>
    
    <div class="event-bus-example">
      <h4>事件总线示例</h4>
      <EventBusSiblingA />
      <EventBusSiblingB />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SiblingA from './SiblingA.vue'
import SiblingB from './SiblingB.vue'
import EventBusSiblingA from './EventBusSiblingA.vue'
import EventBusSiblingB from './EventBusSiblingB.vue'

const messageToA = ref('')
const messageToB = ref('')
const messageLog = ref([])

const handleMessageFromA = (message) => {
  messageToB.value = message
  messageLog.value.push(`兄弟A发送: ${message}`)
}

const handleMessageFromB = (message) => {
  messageToA.value = message
  messageLog.value.push(`兄弟B发送: ${message}`)
}
</script>

<style scoped>
.siblings-container {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.message-log {
  margin: 20px 0;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
}

.event-bus-example {
  margin-top: 30px;
  padding: 15px;
  background-color: #f0f7ff;
  border-radius: 6px;
}
</style>